<template>
  <div class="app-container">
    <el-form inline>
      <el-form-item :label="$t('Name')">{{ device.code }}</el-form-item>
      <el-form-item :label="$t('Code')">{{ device.code }}</el-form-item>
      <el-form-item :label="$t('Category')">
        <dict-tag :options="dict.type.haij_device_type" :value="device.type" />
      </el-form-item>
      <el-form-item :label="$t('Mode')">
        <dict-number-radio v-model="device.mode" button-type :dict="dict.type.haij_device_mode"
          @change="handleChangeMode" />
      </el-form-item>
      <el-form-item v-if="device.mode === 0 || device.mode === 3">
        <el-button type="primary" @click="handleBindDevice">{{ $t('device.BindUser') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col v-if="!list || list.length === 0" :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleInit"
          v-hasPermi="['device:child:init']">{{ $t("Init") }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['device:child:create']">{{ $t("Add") }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="singleDisable" @click="handleUpdate"
          v-hasPermi="['device:child:update']">{{ $t("Modify") }}
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="singleDisable" @click="handleDelete"
          v-hasPermi="['device:child:delete']">{{ $t("Delete") }}
        </el-button>
      </el-col>
      <template v-if="queryParams.type >=0 && queryParams.type < deviceOptions.length">
        <el-col v-for="(command,index) in deviceOptions[queryParams.type]" :key="'command_btn_'+index" :span="1.5">
          <el-button type="warning" plain size="mini" :disabled="multipleDisable" @click="selectionCommand(command)">
            {{ $t(command) }}
          </el-button>
        </el-col>
      </template>
    </el-row>

    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="45" align="center" />
      <el-table-column label="#" type="index" width="45" align="right">
        <template slot-scope="scope">
          <span>{{
            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('Index')" align="center" prop="index" min-width="150" />
      <el-table-column :label="$t('Alias')" align="center" prop="alias" min-width="150" />
      <el-table-column :label="$t('Mode')" align="center" prop="mode" width="120">
        <template slot-scope="{row}">
          <dict-tag :options="dict.type.haij_device_mode" :value="row.mode" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('Status')" align="center" prop="status" width="80">
        <template slot-scope="{row}">
          <span>{{ row.status === 0 ? $t('Empty') : $t('Used') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('Operate')" align="center" width="120" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermi="['device:locker:edit']" size="mini" type="text" icon="el-icon-edit"
            @click="handleUpdate(scope.row)" :title="$t('Modify')"></el-button>
          <el-button v-if="device.mode === 1 || (device.mode === 3 && scope.row.mode === 1)"
            v-hasPermi="['device:locker:edit']" size="mini" type="text" icon="el-icon-key"
            @click="handleCardPermission(scope.row)" :title="$t('Modify')"></el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['device:locker:remove']" :title="$t('Delete')"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="queryPage" />

    <el-dialog :title="title" :visible.sync="formVisible" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="formRules" label-position="left" label-width="120px">
        <el-form-item :label="$t('Alias')" prop="alias">
          <el-input v-model="form.alias" :placeholder="$t('Alias')" />
        </el-form-item>
        <el-form-item v-if="device.mode === 3" :label="$t('Mode')" prop="mode">
          <dict-number-select v-model="form.mode" :dict="dict.type.haij_device_mode"
            :placeholder="$t('device.InsertState')" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="formSubmit">{{ $t("OK") }}</el-button>
        <el-button @click="formCancel">{{ $t("Cancel") }}</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="$t('device.InitChild')" :visible.sync="initVisible" width="500px" append-to-body>
      <el-form ref="initForm" :model="initData" :rules="initRules" label-position="left" label-width="120px">
        <el-form-item :label="$t('Mode')" prop="mode">
          <dict-number-select v-model="initData.mode" :dict="dict.type.haij_device_mode"
            :placeholder="$t('device.InsertState')" />
        </el-form-item>
        <el-form-item :label="$t('Count')" prop="count">
          <el-input-number v-model="initData.count" type="number" :step="1" :min="1" step-strictly />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commitInit">{{ $t("OK") }}</el-button>
        <el-button @click="initVisible = false">{{ $t("Cancel") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DataEntity from '@/components/DataEntity/DataEntity'
  import PermissionDialogVue from './PermissionDialog.vue';
  import deviceAPI from "@/api/device/device";
  import deviceChildAPI from "@/api/device/device-child";

  export default {
    name: "DeviceChild",
    dicts: ["haij_device_type", "haij_device_mode", "haij_device_state"],
    mixins: [DataEntity],
    data() {
      return {
        device: {},
        currentAPI: deviceChildAPI,
        currentBaseURL: '/device/child',
        currentCode: 'device_child',
        queryParams: {
          deviceId: null
        },
        defalutForm: {
          mode: null,
          alias: null
        },
        formRules: {
          mode: [{
            required: true
          }]
        },
        permissionSelect: this.$SelectorConstructor(PermissionDialogVue),
        initData: {
          count: 10,
          mode: 0
        },
        initRules: {
          mode: [{
            required: true
          }],
          count: [{
            required: true
          }]
        },
        initVisible: false
      };
    },
    created() {
      this.queryDevice()
    },
    methods: {
      queryDevice() {
        const vm = this
        deviceAPI.oneById(this.$route.query.deviceId).then(res => {
          vm.device = Object.assign({}, res.data)
        })
      },
      queryPage() {
        const vm = this
        this.queryParams.deviceId = this.$route.query.deviceId
        deviceChildAPI.list(this.queryParams).then(res => {
          vm.list = res.data
          vm.loading = false
        })
      },
      handleBindDevice() {
        this.permissionSelect({
          refresh: true,
          multiple: true,
          params: {
            deviceChild: {
              deviceId: this.device.id,
              index: -1
            }
          }
        })
      },
      handleCardPermission(row) {
        this.permissionSelect({
          refresh: true,
          multiple: false,
          params: {
            deviceChild: Object.assign({}, row)
          }
        })
      },
      handleChangeMode() {
        const vm = this
        const {
          id,
          mode
        } = this.device
        deviceAPI.changeMode({
          id,
          mode
        }).then(res => {
          vm.$message({
            message: vm.$t('OperateSuccess'),
            type: 'success'
          })
        })
      },
      handleInit() {
        this.initVisible = true
      },
      commitInit() {
        const vm = this
        const {
          deviceId
        } = this.$route.query
        const {
          count,
          mode
        } = this.initData
        this.$refs['initForm'].validate((valid) => {
          if (!valid) {
            return
          }
          deviceChildAPI.init({
            subQuantity: count,
            mode,
            id: deviceId,
          }).then(() => {
            vm.queryPage()
            vm.initVisible = false
          })
        })
      }
    }
  };

</script>
